<template>
  <!-- 页面数据需要通过酒店首页传参确定 发送的数据进行页面数据的获取 -->
  <div class="w">
    <div class="Header_information">
      <!-- <div class="crumbs">酒店>广州酒店>锦江子星(吴泾店)</div> -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/hotel' }">酒店</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/hotel' }">广州酒店</el-breadcrumb-item>
        <el-breadcrumb-item>{{message.name}}</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 需要获取数据后进行数据的渲染 -->
      <div class="hotel_address">
        <h2>{{message.name}}</h2>
        <div class="Hotel_pinyin">{{message.alias}}</div>
        <div class="address">
          <i class="el-icon-location-outline"></i>
          {{message.address}}
        </div>
      </div>
    </div>
    <!-- 需要用面包屑组件进行渲染 -->

    <!-- 房间内景图片不需要从数据库获取 需要添加js 才能实现 ...-->
    <div class="indoor_setting">
      <div class="left_img">
        <img :src="src" alt />
      </div>
      <div class="right_img">
        <img :src="item.res" v-for="(item,index) in imgs " :key="index" @click="images(index)" />
      </div>
    </div>
    <!-- 需要添加点击事件进行页面的跳转 -->
    <!-- <div class="price_list">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="价格来源" width="420"></el-table-column>
        <el-table-column prop="bestType" label="低价房型" width="400"></el-table-column>
    价格需要获取数据后渲染-->
    <!-- 但是字体变色还未想到用什么方法进行操作 -->
    <!-- <el-table-column prop="price" label="最低价格/每晚">
        </el-table-column>
      </el-table>
    </div>-->

    <div class="price_list">
      <!-- 标题 -->
      <div class="price">
        <ul>
          <li>价格来源</li>
          <li>低价房型</li>
          <li>最低价格/每晚</li>
        </ul>
      </div>
      <div class="list" v-for="(item,index) in tableData" :key="index">
        <ul>
          <li>{{item.name}}</li>
          <li>{{item.bestType}}</li>
          <li>
            <span class="symbol">￥{{item.price}}</span> 起
            <span class="symbol el-icon-arrow-right"></span>
          </li>
        </ul>
      </div>
    </div>
    <!-- 地图组件 -->
    <!-- 地图 还需要根据酒店所在城市 判断显示地点 修改渲染数据  -->
    <!--切换风景和交通时要重新渲染地图中心点数据并把触发事件的数组替换 -->
    <div class="Map_component">
      <!-- 地图组件 -->
      <div class="Map" id="container"></div>
      <!-- 地图侧边导航 -->
      <div class="Hotel_Location">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="风景" name="second">
            <ul>
              <!-- 暂时数据 还需想方法实现 -->
              <li @mouseover="mouseover">广州塔</li>
              <li @mousemove="mouseover1">广州塔</li>
              <li>广州塔</li>
            </ul>
          </el-tab-pane>
          <el-tab-pane label="交通" name="first">配置管理</el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <!-- 内部数据需要渲染 -->
    <!-- 酒店信息 -->
    <div class="hotel_information">
      <div class="basic_information">
        <ul>
          <li>基本信息</li>
          <li>入住时间</li>
          <li>离店时间</li>
          <li>{{message.creation_time}} / {{message.renovat_time}}</li>
          <li>酒店规模: {{message.roomCount}}间客房</li>
        </ul>
      </div>
      <div class="main_facility">
        <ul>
          <li>主要设施</li>
          <li>
            <span v-for="(item,index) in message.hotelassets" :key="index">{{item.name}}</span>
          </li>
        </ul>
      </div>
      <div class="Parking_service">
        <ul>
          <li>停车服务</li>
          <li>{{message.parking}}</li>
        </ul>
      </div>
      <div class="brand_information">
        <ul>
          <li>品牌信息</li>
          <li>{{hotelbrand.name}}</li>
        </ul>
      </div>
    </div>
    <!-- 评分部分  需要数据渲染-->
    <div class="Review_score">
      <div class="left_score">
        <h3>0条真实用户品论</h3>
        <ul class="Comment_number">
          <li>总评数:148</li>
          <li>好评数:43</li>
          <li>差评数:5</li>
        </ul>
      </div>
      <!-- 评分图示 -->

      <div class="score_picture">
        <div class="recommend">推荐</div>
      </div>
      <!-- 显示评论推荐星星 -->
      <div class="star">
        <el-rate v-model="value" disabled show-score text-color="#ff9900" score-template="{value}"></el-rate>
      </div>
      <!-- 环形进度条 -->
      <div class="progressView">
        <!-- <el-progress type="dashboard" :percentage="percentage"></el-progress> -->
        <el-progress
          type="circle"
          :percentage="environment"
          :width="width"
          color="#ff9900"
          :stroke-width="stroke"
        ></el-progress>
        <div class="environment">
          <span>环境</span>
          <br />
          <span>{{environment / 10}}</span>
        </div>
      </div>
      <div class="progressView">
        <!-- <el-progress type="dashboard" :percentage="percentage"></el-progress> -->
        <el-progress
          type="circle"
          :percentage="product"
          :width="width"
          color="#ff9900"
          :stroke-width="stroke"
        ></el-progress>
        <div class="environment">
          <span>产品</span>
          <br />
          <span>{{product / 10}}</span>
        </div>
      </div>
      <div class="progressView">
        <!-- <el-progress type="dashboard" :percentage="percentage"></el-progress> -->
        <el-progress
          type="circle"
          :percentage="service"
          :width="width"
          color="#ff9900"
          :stroke-width="stroke"
        ></el-progress>
        <div class="environment">
          <span>服务</span>
          <br />
          <span>{{service /10}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      activeName: "second",
      // 推荐星数
      value: 5,

      // 综合评分 画布宽度
      width: 80,
      // 进度条宽度
      stroke: 2,
      // 地图默认中心点
      center: [113.324553, 23.106414],
      //酒店内景图
      imgs: [
        {
          res:
            "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1595658655&di=7a8a5a451a64ac1ee9b337a63d5cedaf&src=http://dpic.tiankong.com/sv/ia/QJ6313552672.jpg?x-oss-process=style/shows",
        },
        {
          res:
            "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1218284268,3681542327&fm=26&gp=0.jpg",
        },
        {
          res:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595929501612&di=beebb63e292fbd07dcd995ac520c2ab6&imgtype=0&src=http%3A%2F%2Fdpic.tiankong.com%2Frj%2Fvw%2FQJ9100486581.jpg%3Fx-oss-process%3Dstyle%2Fshows",
        },
        {
          res:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595929501611&di=2387e03ed3ba27929b1174cc8ca2d924&imgtype=0&src=http%3A%2F%2Fs3.lvjs.com.cn%2Fuploads%2Fpc%2Fplace2%2F2016-06-06%2F30ed23c4-3058-4d24-a668-8d6e2206455c.jpg",
        },
        {
          res:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595929501609&di=a0e11bedf73a85988cb73dcd962518d4&imgtype=0&src=http%3A%2F%2Fimages4.c-ctrip.com%2Ftarget%2F2A060400000008ryn037E.jpg",
        },
        {
          res:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595929501609&di=8ad219bd65341a808f109e6057bbb883&imgtype=0&src=http%3A%2F%2Fdimg03.c-ctrip.com%2Fimages%2Ffd%2Ftg%2Fg4%2FM03%2F88%2F12%2FCggYHlaKZkKAHFPUADFvL9Dxkq4165_R_1024_10000_Q90.jpg",
        },
      ],
      src:
        "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595668752538&di=289a78c4ac116694bec52692ed53c5e5&imgtype=0&src=http%3A%2F%2Fimg02.hc360.com%2Fhotelsupplies%2F201405%2F201405231403253781.jpg",
      percentage: 71,
      // 获取的酒店信息
      message: [],
      //  评分
      environment: 11,
      product: 1,
      service: 1,
      hotelbrand: "酒店品牌",
    };
  },
  created() {
    this.$axios({
      // url: "/hotels?city=197&enterTime=2019-06-12&leftTime=2019-07-15&_limit=1",
      url: "/hotels",
      params: {
        id: this.$route.params.id,
      },
    }).then((res) => {
      console.log(res);
      this.message = res.data.data[0];
      this.value = res.data.data[0].stars;
      this.tableData = res.data.data[0].products;
      this.hotelbrand = res.data.data[0].hotelbrand;
      // 评分数据
      this.environment = res.data.data[0].scores.environment * 10;
      this.product = res.data.data[0].scores.product * 10;
      this.service = res.data.data[0].scores.service * 10;

      console.log(this.tableData);
      console.log(this.message);
    });
  },
  mounted() {
    this.punctuation();
  },
  methods: {
    images(index) {
      this.src = this.imgs[index].res;
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    punctuation() {
      window.onLoad = (res) => {
        var map = new AMap.Map("container", {
          zoom: 14,
          center: this.center,
        });
        var marker = new AMap.Marker({
          content: `<div class='box'>
        <i class='el-icon-location'></i>
        <span>1</span>
        <div class='annotation'>广州塔</div>
        </div>`,
          position: [113.324553, 23.106414],
          title: "广州塔",
        });

        map.add(marker);
      };

      var url =
        "https://webapi.amap.com/maps?v=1.4.15&key=6d8ec04f4a92873e3b57f9115b3220ad&callback=onLoad";
      var jsapi = document.createElement("script");
      jsapi.charset = "utf-8";
      jsapi.src = url;
      document.head.appendChild(jsapi);
      console.log(this.center);
    },
    mouseover() {
      this.center = [113.324553, 23.106414];
      this.punctuation();
      console.log(this.center);
    },
    mouseover1() {
      this.center = [113.329198, 23.105853];
      this.punctuation();
      console.log(this.center);
    },
  },
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.w {
  width: 1000px;
  margin: 20px auto;
  // background: pink;
}
// 酒店头
.Header_information {
  .crumbs {
    font-size: 14px;
  }
  .hotel_address {
    margin-top: 20px;
    margin-bottom: 40px;
    h2 {
      font-weight: 400;
    }
    .Hotel_pinyin {
      font-size: 14px;
    }
  }
  .address {
    font-size: 14px;
  }
}
//  酒店内景图
.indoor_setting {
  height: 400px;
  .left_img {
    width: 640px;
    margin-right: 10px;
    float: left;
    img {
      width: 640px;
      height: 360px;
    }
  }
  .right_img {
    width: 350px;
    float: left;

    img {
      width: 160px;
      height: 110px;
      margin-bottom: 11px;
      margin-left: 10px;
    }
  }
}
.price_list {
  height: 200px;
  line-height: 50px;
  .price {
    ul {
      height: 50px;
      border-bottom: 1px solid #ebeef5;
      display: flex;
      li {
        flex: 1;
        font-size: 14px;
        color: #909399;
      }
    }
  }
  .list {
    ul {
      height: 50px;
      border-bottom: 1px solid #ebeef5;
      display: flex;
      li {
        flex: 1;
        font-size: 14px;
        .symbol {
          color: #ff9900;
        }
      }
    }
    ul:hover {
      background: #f5f7fa;
    }
  }
}
// 地图
.Map_component {
  margin-top: 40px;
  height: 360px;
  .Map {
    width: 650px;
    height: 360px;
    float: left;
  }
  .Hotel_Location {
    width: 330px;
    height: 360px;
    float: left;
    margin-left: 20px;
  }
}
// 酒店信息
.hotel_information {
  height: 250px;
  // background-color: pink;
  margin-top: 30px;
  font-size: 14px;
  .basic_information {
    height: 60px;
    line-height: 60px;
    border-bottom: 1px solid #eeeeee;
    ul {
      display: flex;
      li {
        flex: 1;
        color: #666666;
      }
      li:nth-child(1) {
        color: #000;
      }
    }
  }
  .main_facility {
    height: 60px;
    line-height: 60px;
    border-bottom: 1px solid #eeeeee;
    ul {
      display: flex;
      li {
        flex: 1;
      }
      li:nth-child(2) {
        flex: 4;
        span {
          height: 30px;
          background: #eeeeee;
          border-radius: 5px;
          padding: 5px 8px;
          font-size: 14px;
          color: #666;
          margin-right: 10px;
        }
      }
    }
  }
  .Parking_service {
    height: 60px;
    line-height: 60px;
    border-bottom: 1px solid #eeeeee;
    ul {
      display: flex;
      li {
        flex: 1;
      }
      li:nth-child(2) {
        flex: 4;
        color: #666666;
      }
    }
  }
  .brand_information {
    height: 60px;
    line-height: 60px;
    border-bottom: 1px solid #eeeeee;
    ul {
      display: flex;
      li {
        flex: 1;
      }
      li:nth-child(2) {
        flex: 4;
      }
    }
  }
}
// 评论信息
.Review_score {
  position: relative;
  height: 200px;
  overflow: hidden;
  // 左边信息
  .left_score {
    margin-top: 20px;
    float: left;
    width: 180px;
    .Comment_number {
      margin-top: 20px;
    }
  }
  // 推荐背景
  .score_picture {
    position: absolute;
    left: 205px;
    width: 100px;
    height: 100px;
    .recommend {
      margin-top: 60px;
      width: 80px;
      height: 80px;
      border: 2px solid #ffedd4;
      border-radius: 50%;
      font-size: 25px;
      color: #ffe6c1;
      text-align: center;
      line-height: 80px;
      transform: rotate(-45deg);
      // background: pink;
    }
  }
  .star {
    margin-top: 90px;
    float: left;
  }
  .progressView {
    position: relative;
    float: left;
    margin-top: 65px;
    margin-left: 60px;
    color: #ff9900;
    /deep/ .el-progress__text {
      color: white;
    }
    .environment {
      position: absolute;
      top: 22px;
      left: 28px;
    }
  }
}
/deep/ .box {
  width: 20px;
  height: 40px;
  position: relative;
  // background: pink;
  i {
    font-size: 30px;
    color: #4a9aff;
  }
  span {
    color: #fff;
    position: absolute;
    top: 1px;
    left: 9px;
    font-size: 20px;
  }

  .annotation {
    width: 60px;
    height: 30px;
    background: #fff;
    text-align: center;
    line-height: 30px;
    position: absolute;
    top: -34px;
    left: -15px;
    display: none;
  }
  .bxo {
    background: chartreuse;
  }
  span:hover + .annotation {
    display: block;
  }
}
</style> 